<template>
    <van-nav-bar
  title="商品详细"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/><van-skeleton title :row="3" />
<div style="height: 45px;width: 370px;"></div>
    <!-- <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="item in detailApiData" :key="image">
    <img :src="item.pics_big_url" style="width: 370px;height: 200px;"/>
  </van-swipe-item>
</van-swipe> -->
<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="width: 370px;height: 200px;"/>
  </van-swipe-item>
</van-swipe>
    <div>
        <van-tabs v-model:active="active">
  <van-tab title="商品详情">
     <div v-html="detailApiData.goods_introduce">
        
    </div>
  </van-tab>
  <van-tab title="规格参数">内容 2</van-tab>
  <van-tab title="销售数据">内容 3</van-tab>
  <van-tab title="采购说明">内容 4</van-tab>
</van-tabs>
   
    
<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { detailApi } from '@/api/api';
import { showToast } from 'vant';
import { useRoute } from 'vue-router';
import router from '@/router';
let route=useRoute()
console.log(route.params.goods_id);

let detailApiData=ref([])
detailApi(route.params.goods_id).then(res=>{
    detailApiData.value=res.data.message
    console.log(res);
    
})

 const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    ];
    const onSubmit=()=>{
    router.push('/didan')
}
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
const onClickLeft = () => history.back();
</script>

<style lang="scss" scoped>

</style>